<template>
  <view class="custom-list">
    <uni-swipe-action class="list-container">
      <uni-swipe-action-item v-for="item in items" :key="item[columns.key]">
        <view class="list-item">
          <custom-checkbox
            v-show="isChecked"
            :value="checkedList.includes(`${item[columns.key]}`)"
            @onChecked="onChecked(item[columns.key])"
          />

          <view class="content" @click="handleClick(item)">
            <view class="text">{{ item[columns.text] }}</view>
            <view class="note" v-show="item[columns.note]">{{ item[columns.note] }}</view>
            <view class="action-icon" v-show="showActionIcon"></view>
          </view>
        </view>
        <template v-slot:right>
          <slot name="action" :data="item"></slot>
        </template>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <view class="pagination-container" v-if="!disablePage" v-show="computedPageShow">
      <uni-pagination
        :current="pagination.pageNum"
        :pageSize="pagination.pageSize"
        :total="pagination.totalPages"
        title="标题文字"
        prev-text="前一页"
        next-text="后一页"
        @change="onPageChange"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: "custom-list",
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Object,
      default: () => ({}),
    },
    showActionIcon: {
      type: Boolean,
      default: true,
    },
    isChecked: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default: () => ({}),
    },
    disablePage: {
      type: Boolean,
      default: false,
    },
    hideOnSinglePage: {
      type: Boolean,
      default: false,
    },
    checkedList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showPagination: true,
    };
  },
  computed: {
    computedPageShow() {
      const { pageSize, totalPages } = this.pagination;
      if (this.hideOnSinglePage && totalPages / pageSize < 1) {
        return false;
      }
      return true;
    },
  },
  methods: {
    hanldeEmit(emitName, params) {
      this.$emit(emitName, params);
    },
    handleClick(item) {
      this.hanldeEmit("onItemClick", item);
    },
    onPageChange(item) {
      this.hanldeEmit("onPageChange", item);
    },
    onChecked(value) {
      const checkedList = this.checkedList;
      const keyValue = `${value}`;
      if (!checkedList.includes(keyValue)) {
        checkedList.push(keyValue);
      } else {
        const index = checkedList.indexOf(keyValue);
        index !== -1 && checkedList.splice(index, 1);
      }
      this.$emit("onChecked", checkedList);
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-list {
  width: 100%;
  height: 100%;

  .list-container {
    .list-item {
      padding: 8px 16px;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom: 1px solid #f5f5f5;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;

      .content {
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 0px;

        .text {
          width: 100%;
          height: auto;
        }

        .note {
          width: 100%;
          margin-top: 2px;
          color: #999;
          font-size: 12px;
        }
      }

      .action-icon {
        content: "";
        right: 0px;
        top: calc(50% - 6px);
        height: 10px;
        width: 10px;
        border-width: 2px 2px 0 0;
        border-color: silver;
        border-style: solid;
        -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
        transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
        position: absolute;
      }
    }
  }

  .pagination-container {
    padding: 8px;
    box-sizing: border-box;
    // background-color: #fff;
  }
}
</style>
